/**
 * Author: Shen Yanqiu
 * Date: 2018-02-27
 * Time: 17:54
 *
 */
import React from 'react';
import { Page } from 'components';
import { Row, Col, Icon, Card, DatePicker, Tabs } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import styles from './style.less';
import classNames from "classnames";
import moment from "moment/moment";
import NewmediaStatisticsCartogramCardBlock from './NewmediaStatisticsCartogramCardBlock';
import FormBlock from './FormBlock';

const RangePicker = DatePicker.RangePicker;
const TabPane = Tabs.TabPane;

class NewmediaStatisticsCartogram extends React.Component {
  static propTypes = {
    loading: PropTypes.object,
    dispatch: PropTypes.func,
    newmediaStatisticsCartogram: PropTypes.object,
    app: PropTypes.object,
  };
  state = {
  };
  render () {
    const { loading, dispatch, app, newmediaStatisticsCartogram } = this.props;
    const { user } = app;
    const {
      areaChartDateWeiBoFSZS,
      areaChartDateWeiBoYDLZS,
      areaChartDateWeiBoDZZS,
      areaChartDateWeiBoPLZS,
      areaChartDateWeiBoZFZS,
      areaChartDateWeixinFSZS,
      areaChartDateWeixinYDLZS,
      areaChartDateWeixinDZZS,
      areaChartDateWeixinPLZS,
      areaChartDateWeixinZFZS,
    } = newmediaStatisticsCartogram;
    const changeTabs = (key) => {
      dispatch({
        type: 'newmediaStatisticsCartogram/changeTabs',
        payload: {
          key,
        },
      });
      dispatch({
        type: 'newmediaStatisticsCartogram/updateTabsKey',
        payload: {
          tabsKey: key,
        },
      });
    };
    const doUpdateAreaChartWeiBo = (dates, zsType) => {
      dispatch({
        type: 'newmediaStatisticsCartogram/loadAreaChartWeiBoDate',
        payload: {
          checkTime: `${dates[0].format('YYYY-MM-DD')}-${dates[1].format('YYYY-MM-DD')}`,
          zsType,
        },
      });
    };

    const doUpdateAreaChartWeixin = (dates, zsType) => {
      dispatch({
        type: 'newmediaStatisticsCartogram/loadAreaChartWeixinDate',
        payload: {
          checkTime: `${dates[0].format('YYYY-MM-DD')}-${dates[1].format('YYYY-MM-DD')}`,
          zsType,
        },
      });
    };

    const submitHandler = (values, typeName) => {
      dispatch({
        type: 'newmediaStatisticsCartogram/bindAccount',
        payload: {
          values,
          typeName,
        },
      });
    };
    return (
      <Page loading={loading.effects['newmediaStatisticsCartogram/firstLoad']}>
        <Tabs defaultActiveKey={"weibo"} onChange={changeTabs}>
          <TabPane key={"weibo"} tab={"微博"}>
            <Row className={styles.newmediaStatisticsCartogram}>
              {
                user ?
                  <Col span={24}>
                    <Row justify={"center"} align={"middle"} type={"flex"}>
                      <Col span={12}>
                        <div className={styles.formTopTitle}>
                          <span>为了能获取您的微博数据，请填写您的微博账号，谢谢！</span>
                        </div>
                        <div className={styles.formBlock}>
                          <FormBlock
                            labelText={"微博账号"}
                            nameText={"weibo"}
                            submitHandler={submitHandler}
                            submitLoading={loading.effects['newmediaStatisticsCartogram/bindAccount']}
                          />
                        </div>
                      </Col>
                    </Row>
                  </Col>
                  :
                  <Col>
                    <Col span={24} className={styles.cardListToTop}>
                      <Row gutter={40}>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="team" className={classNames(styles.iconStyles, styles.blue)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总粉丝数</span>
                                <span>1455345</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="tag-o" className={classNames(styles.iconStyles, styles.green)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总微博数</span>
                                <span>4533</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="paper-clip" className={classNames(styles.iconStyles, styles.yellow)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总关注人数</span>
                                <span>8761</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                      </Row>
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeiBoFSZS}
                        title={"粉丝走势"}
                        zsType={"fszs"}
                        doUpdateAreaChart={doUpdateAreaChartWeiBo}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeiBoYDLZS}
                        title={"阅读量走势图"}
                        zsType={"ydlzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeiBo}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeiBoDZZS}
                        title={"点赞走势图"}
                        zsType={"dzzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeiBo}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeiBoPLZS}
                        title={"评论走势图"}
                        zsType={"plzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeiBo}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeiBoZFZS}
                        title={"转发走势图"}
                        zsType={"zfzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeiBo}
                      />
                    </Col>
                  </Col>
              }
            </Row>
          </TabPane>
          <TabPane key={"weixin"} tab={"微信"}>
            <Row className={styles.newmediaStatisticsCartogram}>
              {
                !user ?
                  <Col span={24}>
                    <Row justify={"center"} align={"middle"} type={"flex"}>
                      <Col span={12}>
                        <div className={styles.formTopTitle}>
                          <span>为了能获取您的微信数据，请填写您的微信账号，谢谢！</span>
                        </div>
                        <div className={styles.formBlock}>
                          <FormBlock
                            labelText={"微信账号"}
                            nameText={"weixin"}
                            submitHandler={submitHandler}
                            submitLoading={loading.effects['newmediaStatisticsCartogram/bindAccount']}
                          />
                        </div>
                      </Col>
                    </Row>
                  </Col>
                  :
                  <Col>
                    <Col span={24} className={styles.cardListToTop}>
                      <Row gutter={40}>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="team" className={classNames(styles.iconStyles, styles.blue)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总粉丝数</span>
                                <span>1455345</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="tag-o" className={classNames(styles.iconStyles, styles.green)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总微博数</span>
                                <span>4533</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                        <Col span={7}>
                          <div className={styles.cardBox}>
                            <div className={styles.img}>
                              <Icon type="paper-clip" className={classNames(styles.iconStyles, styles.yellow)} />
                            </div>
                            <div className={styles.content}>
                              <p>
                                <span>总关注人数</span>
                                <span>8761</span>
                              </p>
                            </div>
                          </div>
                        </Col>
                      </Row>
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeixinFSZS}
                        title={"粉丝走势"}
                        zsType={"fszs"}
                        doUpdateAreaChart={doUpdateAreaChartWeixin}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeixinYDLZS}
                        title={"阅读量走势图"}
                        zsType={"ydlzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeixin}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeixinDZZS}
                        title={"点赞走势图"}
                        zsType={"dzzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeixin}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeixinPLZS}
                        title={"评论走势图"}
                        zsType={"plzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeixin}
                      />
                    </Col>
                    <Col span={24} className={styles.MarginTop}>
                      <NewmediaStatisticsCartogramCardBlock
                        areaChartDate={areaChartDateWeixinZFZS}
                        title={"转发走势图"}
                        zsType={"zfzs"}
                        doUpdateAreaChart={doUpdateAreaChartWeixin}
                      />
                    </Col>
                  </Col>
              }
            </Row>
          </TabPane>
        </Tabs>

      </Page>
    );
  }
}
export default connect(({ loading, app, newmediaStatisticsCartogram }) => ({ loading, app, newmediaStatisticsCartogram }))(NewmediaStatisticsCartogram);
